<template>
	<div class="page-wrap">
		<Table filter v-bind="tableOpts" v-on="tableEvent" />
		<el-dialog v-bind="{
			title: '补单产品详情',
			'close-on-click-modal': false,
			width: '60vw',
		}" :visible.sync="showList">
			<div style="height: 60vh">
				<Table :pagination="false" :dataSource="list" :columns="listColumn">
				</Table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { EXTRA_ORDER_STATUS } from "@/assets/js/params.js";
import { ExtraListColumn } from "@/assets/js/columns.js";
import tableMixins from "@/mixins/tableMixins.vue";
export default {
	name: "OrderExtra",
	mixins: [tableMixins],
	data () {
		return {
			apiName: "getExtraOrder",
			showList: false,
			listColumn: ExtraListColumn,
			list: [],
			form: {
				orderName: {
					tag: "el-input",
					label: "订单名称",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入订单名称",
					},
				},
				creator: {
					tag: "el-input",
					label: "创建人",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入创建人",
					},
				},
				status: {
					tag: "el-select",
					label: "订单状态",
					value: "",
					items: Object.entries(EXTRA_ORDER_STATUS).map(([value, label]) => ({
						label,
						value,
					})),
					props: {
						clearable: true,
						filterable: true,
					},
				},
				date: {
					tag: "el-date-picker",
					label: "创建时间",
					value: [],
					props: {
						rangeSeparator: "至",
						startPlaceholder: "开始时间",
						endPlaceholder: "结束时间",
						type: "datetimerange",
						defaultTime: ["00:00:00", "23:59:59"],
					},
				},
			},
		};
	},
	computed: {},
	methods: {
		handleAction (status, row) {
			const { orderName: name = "", id } = row;
			if (status == 0) {
				this.showList = true;
				this.list = row.materials || [];
				return;
			} else
				this.showConfirm(
					`确认${status == "1" ? "通过" : "拒绝"}【${name}】？`,
					"patchExtraOrder",
					{ id, status }
				);
		},
	},
};
</script>

<style lang="less" scoped></style>

